<html lang="en"><head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="stylesheet" type="text/css" href="../scratch/newcss.css" />
    <link href="../css/bootstrap.min.css" rel="stylesheet">   
    <script src="../js/jquery.min.js"></script>
    <link rel="stylesheet" 
    href="../css/jquery.dataTables.min.css">
    <script type="text/javascript" 
    src="../js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" 
    src="../js/bootstrap.min.js"></script>

    <script src="../js/mostrar.js"></script>

    <!-- Bootstrap core CSS -->
    <link href="../css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="../navbar.css" rel="stylesheet">

  </head>

  <body>

    <div class="container">

      <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
          <div class="navbar-header">
             <a href="../Inicio/index.html">
                <img src="../images/logo2.png" alt="als" class="img-circle"  width='100' height='100' style='margin:0em;'>
                 <!--<li><a href="../navbar-static-top/" >--> 
                 <img src="../images/letras.png" alt="als"  width='500' height='100' style='margin:0em;'>
              </a>
          </div>
          
          <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
              <li class="active"><a href="../acercade.html">Acerca de</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div><!--/.container-fluid -->
      </nav>
      <!-- Main component for a primary marketing message or call to action -->
     
      <div  class="jumbotron" style="background: rgba(255,255,255,0.5);">
           <div class="row"> 
               <div class="col-md-3">
                     <input id="botonVerde" type="button" value="Digestivo" name="digestivo"  onclick="mostrarDialogoContenido(name)"/>
                    <br>
                    <br>
                    <input id="botonVerde" type="button" value="Circulatorio" name="circulatorio" onclick="mostrarDialogoContenido(name)"/>
                    <br>
                    <br>
                    <input id="botonVerde" type="button" value="Respiratorio" name="respiratorio" onclick="mostrarDialogoContenido(name)"/>
                    <br>
                    <br>
                    <input id="botonVerde" type="button" value="Urinario" name="urinario" onclick="mostrarDialogoContenido(name)"/>
                    <br>
                    <br>
                    <input id="botonVerde" type="button" value="Óseo" name="esqueleto" onclick="mostrarDialogoContenido(name)"/>
                    <br>
                    <br>
                    <input id="botonVerde" type="button" value="Nervioso" name="nervioso" onclick="mostrarDialogoContenido(name)"/>
                    <br>
                    <br>
                    <input id="botonVerde" type="button" value="Endocrino" name="endocrino" onclick="mostrarDialogoContenido(name)"/>
                    <br>
                    <br>
                    <br>                    
                    <br>
                    <input id="botonVerde" value="Volver" style="background:green" onclick="location.href='../Inicio/index.html'" />
               </div>
               <div class="col-md-6">
                    <table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
                        <thead style="background-color: #35b128; color: white;">
                         <tr>
                             <th>Cómo se ve</th>
                             <th>Concepto</th>
                         </tr>
                     </thead>

                     <tbody>
                         <tr>
                             <td><img src="../images/urinario/riñon.jpg" alt="" style="width: 300px; height: 300px;"></td>
                             <td><strong>Riñón <br></strong> Filtran la sangre del aparato circulatorio y eliminan los desechos 
                                 mediante la orina, a través de un complejo sistema que incluye mecanismos de filtración, reabsorción y excreción.</td>
                         </tr>
                         <tr>
                             <td><img src="../images/urinario/ureter.jpg" alt="" style="width: 300px; height: 300px;"></td>
                             <td><strong>Uréter<br></strong> Es una vía urinaria retroperitoneal con forma de tubo que transporta la orina desde el riñón hasta la vejiga urinaria.</td>
                         </tr> 
                         <tr>
                             <td><img src="../images/urinario/vejiga.jpg" alt="" style="width: 300px; height: 300px;"></td>
                             <td><strong>Vejiga <br></strong>Es un órgano hueco músculo-membranoso que forma parte del tracto urinario y que recibe la orina de los uréteres, la almacena y 
                                 la expulsa a través de la uretra al exterior del cuerpo.</td>
                         </tr>
                         <tr>
                             <td><img src="../images/urinario/uretra.jpg" alt="" style="width: 300px; height: 300px;"></td>
                             <td><strong>Uretra <br></strong>Es el conducto por el que pasa la orina en su fase final del proceso urinario desde la vejiga urinaria hasta el exterior 
                                 del cuerpo. La función de la uretra es excretora en ambos sexos y también cumple una función reproductiva en el hombre.</td>
                         </tr>
                     </tbody>
                 </table>
               </div>    
                <canvas width="150" height="215" id="canvass" style="position: absolute; top: 370px; left: 1115px;"></canvas>
            </div>
            
          
           
          <div id="burbujaTexto" style=" width: 200px; height: 200px; position: absolute; top: 300px; left: 1025px; display: block;">
              <img id="imgen" src="../imagenesMascota/burbuja4.png"> 
           </div>
          
          
          </div>
      </div>
<script>
$(document).ready(function(){
    $('#example').dataTable( {
    "iDisplayLength": 1,
    "bLengthChange": false,
    "bFilter": false,
    "ordering": false,
    "pagingType": "simple",
    "language": {
        "sInfo": " ",
        "paginate": {
          "previous": "<<",
          "next": ">>"
        }    
    }
  } );
});
</script>
 <script  type="text/javascript" src="../js/dibujar.js"></script>
</body>
</html>